import { DescriptionsProps } from "antd";
import './index.scss'
import { getOrderDetailsApi } from "@/api/order";
import { OrderItem } from "@/types/order";
import { OrderStatus, PayMethod } from "@/utils/enum";

export const PreviewOrder = memo(forwardRef((_prop, ref) => {
  // 存储数据
  const [orderDetail, setOrderDetail] = useState<OrderItem>()
  const [orderNumber, setOrderNumber] = useState<DescriptionsProps['items']>();
  const items: DescriptionsProps['items'] = [
    {
      key: '1',
      label: '订单号',
      children: orderDetail?.number,
    },
    {
      key: '2',
      label: '下单时间',
      children: orderDetail?.orderTime,
    },
    {
      key: '3',
      label: '订单状态',
      children: <div>{orderDetail?.status && OrderStatus[orderDetail?.status! - 1].name}</div>
    },
    {
      key: '4',
      label: '用户名',
      children: orderDetail?.consignee,
    },
    {
      key: '5',
      label: '手机号',
      children: orderDetail?.phone,
    },
    {
      key: '6',
      label: '地址',
      children: orderDetail?.address,
    },
    {
      key: '7',
      label: '备注',
      children: <div>{orderDetail?.status === 6 ? orderDetail?.cancelReason : orderDetail?.remark}</div>,
    },
  ];
  const cost: DescriptionsProps['items'] = [
    {
      key: '1',
      label: '菜品小计',
      children: "￥" + orderDetail?.amount,
    },
    {
      key: '2',
      label: '派送费',
      children: "￥6",
    },
    {
      key: '3',
      label: '打包费',
      children: "￥" + orderDetail?.packAmount
    },
    {
      key: '4',
      label: '合计',
      children: "￥" + (orderDetail?.packAmount! + 6 + orderDetail?.amount!),
    },
    {
      key: '5',
      label: '支付渠道',
      children: <div>{orderDetail?.payMethod && PayMethod[orderDetail?.payMethod! - 1].name}</div>,
    },
    {
      key: '6',
      label: '支付时间',
      children: orderDetail?.checkoutTime,
    },
  ];
  // 添加和修改员工
  const [open, setOpen] = useState(false);
  const showModal = () => {
    setOpen(true)
  }
  const handleCancel = () => {
    setOpen(false);
  };
  // 获取详情数据
  const getOrderDetail = async (id: number) => {
    const res = await getOrderDetailsApi(id)
    setOrderDetail(res.data)
    const arr = res.data.orderDetailList!.map(item => {
      return {
        key: item.id,
        label: item.name + 'x' + item.number,
        children: '￥' + item.amount
      }
    })
    setOrderNumber([...arr, {
      key: +new Date,
      label: '菜品小计',
      children: <div style={{ color: 'red' }}>{'￥' + res.data?.amount}</div>,
    }])
  }
  useImperativeHandle(
    ref,
    () => {
      return {
        showModal,
        getOrderDetail
      }
    }
  );
  return (
    <Modal
      title="订单信息"
      centered
      open={open}
      onCancel={handleCancel}
      footer={null}
      width={800}
    >
      <Descriptions title="基本信息" items={items} />
      <Descriptions title="菜品" items={orderNumber} />
      <Descriptions title="费用" items={cost} />
    </Modal>
  )
}))